<template>
	<!-- 时间选择器 -->
	<view class="TimeContent">
		<view class="item_pop">
			<view class="label">
				期望上门服务时间 <view class="icon iconfont icon-cha1 pos_tit" @click.stop="closePop('close')"></view>
			</view>
			
			<view class="Date" >
				<view class="left">
					<!-- 年月日 -->
					<view class="YearItem" :class="index == DateNum?'selectYear':''" v-for="(item, index) in DateArr" @click.stop="ChangeYearNum(index)">
						{{item}}
					</view>
				</view>
				<view class="right" id="scroll" ref="right">
					<scroll-view :scroll-y="true" class="right_scroll" :scroll-top="scrollTop" scroll-with-animation="true">
						<!-- 时间段 -->
						<view class="TimeItem" v-for="(item, index) in TimeArr" :key="index" @click.stop="changeTimeNum(index)">
							<view v-if="item.substring(0,2) >= 0 && item.substring(0,2) < 6" class="full">
								<view v-if="item.substring(0,2) == 0 || (index == TimeType1)"  class="textTime">
									{{textTime[0]}} <!-- 只能出现一次 -->
								</view>
							</view>
							<view v-else-if="item.substring(0,2) >=6  && item.substring(0,2) < 12" class="full"> 
								<view v-if="item.substring(0,2) == 6 || (index == TimeType2)"  class="textTime">
									{{textTime[1]}} 
								</view>
							</view>
							<view v-else-if="item.substring(0,2) >=12  && item.substring(0,2) < 18" class="full"> 
								<view v-if="item.substring(0,2) == 12 || (index == TimeType3)" class="textTime">
									{{textTime[2]}} 
								</view>
							</view>
							<view v-else class="full"> 
								<view v-if="item.substring(0,2) == 18 || (index == TimeType4)" class="textTime">
									{{textTime[3]}} 
								</view>
							</view>
							
							<view class="timeArea" :class="index == DateTimeNum?'selectTime':''" > {{item}} </view>
							<!-- <view class="btn iconfont" :class="index == DateTimeNum?'icon-gou active':''"></view> -->
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="btn_sub">
			<view class="btn" @click.stop="closePop('sub')">确定</view>
		</view>
	</view>
</template>
<script>
export default {
  onLoad() {
			
  },

  props: {
			//选择的年月日
			DateNum: {
			    type: Number,
			    default:0,
			},
			//选择的时间段 这个时间如果是当天 那必须大于hour
			DateTimeNum: {
			    type: Number,
			    default: 10,
			},
			// 日期的区间
			YearNum: {
			    type: Number,
			    default:1,
			},
			Time: {
          type: String,
          default: "",
			}
  },

  data() {
			return {
          // DateTimeNum: 10,
          // DateNum: 0,
          scrollTop: 0, // 滚动距离
          hour: 0, // 当前时间 
          year: '2023',
          month: '03',
          day: '01',
          nowTimeDate: '',
          // YearNum: 2,
          DateArr: [
          ],
          textTime:[
              "凌辰", // 0 ~ 5
              "上午", // 5 ~ 12
              "下午",	// 13 ~ 18
              "晚上"	// 19 ~ 23
          ],
          TimeArr: [
              '00:00 ~ 01:00',
              '01:00 ~ 02:00',
              '02:00 ~ 03:00',
              '03:00 ~ 04:00',
              '04:00 ~ 05:00',
              '05:00 ~ 06:00',
              '06:00 ~ 07:00',
              '07:00 ~ 08:00',
              '08:00 ~ 09:00',
              '09:00 ~ 10:00',
              '10:00 ~ 11:00',
              '11:00 ~ 12:00',
              '12:00 ~ 13:00',
              '13:00 ~ 14:00',
              '14:00 ~ 15:00',
              '15:00 ~ 16:00',
              '16:00 ~ 17:00',
              '17:00 ~ 18:00',
              '18:00 ~ 19:00',
              '19:00 ~ 20:00',
              '20:00 ~ 21:00',
              '21:00 ~ 22:00',
              '22:00 ~ 23:00',
              '23:00 ~ 00:00'
          ],
          changeNowTimeArea:[],
          showTextAndHide: 0,
          TimeType1: false, // 判断当前时间处于哪个时间段
          TimeType2: false, // 判断当前时间处于哪个时间段
          TimeType3: false, // 判断当前时间处于哪个时间段
          TimeType4: false, // 判断当前时间处于哪个时间段
			}
  },

  mounted() {
			// 如果可以做一个加载过程
			this.Loading("start")
			this.init();
			// 初始化结束去除加载过程
			this.Loading("end")
  },

  methods: {
			init(){
          let DateArgs = [];
          // 初始化 从当天开始生成日期	
          let today = new Date();
          this.year = today.getFullYear();
          this.month = ("0" + (today.getMonth() + 1)).slice(-2);
          this.day = ("0" + today.getDate()).slice(-2);
          this.hour = today.getHours();
          if(this.hour<6){
              this.TimeType1 = 0;
          }else if(this.hour<12){
              this.TimeType2 = 0;
          }else if(this.hour<18){
              this.TimeType3 = 0;
          }else if(this.hour<24){
              this.TimeType4 = 0;
          }
          this.nowTimeDate = this.year+'-'+this.month+'-'+this.day;
          uni.setStorageSync("nowDate",this.nowTimeDate);
          this.month = parseInt(this.month);
          this.day = parseInt(this.day);
          this.changeNowTimeArea = JSON.parse(JSON.stringify(this.TimeArr));
          // 过滤掉非过时的时间段
          if(this.Time){
              if(this.DateNum == 0){
                  this.TimeArr.splice(0, this.hour);
                  this.$emit('selectChange', this.DateTimeNum  ,this.DateNum, '');
                  // 让时间区域滚动到指定地点
                  this.scrollHeight(this.DateTimeNum);
              }else{
                  this.TimeArr = this.changeNowTimeArea;
              }
              // 初始化时间
              this.$emit('selectChange', this.DateTimeNum ,this.DateNum, "");
          }else {
              this.TimeArr.splice(0, this.hour);
              // 初始化时间
              this.$emit('selectChange', 0 ,0, '');
          }
          this.DateArr = this.getDateList(this.year,this.month, this.day, DateArgs);
			},
			getDateList (year,month,day ,retArgs) {
          let nowYear = year;
          // 计算当前有多少个月
          let months = this.YearNum*12;
          for (let i=0;i<months; i++) {
              let nowMonth = parseInt((month + i)%12) === 0 ? 12 : (month + i)%12;// 取余
              nowYear = this.year + parseInt((month+i)/12); // 取整
              // 计算当前月有多少天
              let days = this.getDays(this.year,this.month, i);
              let initDayNum = 1;
              if(this.year == nowYear && this.month == nowMonth){
                  initDayNum = parseInt(this.day);
              }
              for (let d=initDayNum; d <= days; d++) {
                  if(retArgs.length == 0){
                      retArgs.push('今日');
                  }else {
                      let newDayStr = d;
                      if(newDayStr < 10){
                          newDayStr = '0'+newDayStr;
                      }
                      let nowMonthStr = nowMonth;
                      if(nowMonthStr< 10){
                          nowMonthStr = '0'+nowMonthStr
                      }
                      let DateTimeItem = nowYear+'-'+nowMonthStr+'-'+newDayStr
                      retArgs.push(DateTimeItem);// 添加一项
                  }
              }
          }
          return retArgs;
			},
			// 获取当前月有多少天
			getDays(year,month, num){
          let days = new Date(year, month + 1 + num, 0).getDate();
          return days;
			},
			// 点击日期
			ChangeYearNum(index){
          let that = this
          // 减少触发（减少计算 两次点击同一个时间）
          if(index == that.DateNum){
              return ;
          }
          if(index == 0){
              // 滚动位置还原
              that.scrollTop = 0;
              that.changeNowTimeArea = JSON.parse(JSON.stringify(that.TimeArr));
              // 过滤掉非过时的时间段
              that.TimeArr.splice(0, that.hour);
              // 当前时间就该在hour之后
              if (that.DateTimeNum > that.hour){
                  that.$emit('selectChange', (that.DateTimeNum - that.hour), 0, '');
              }else {
                  that.$emit('selectChange', 0 , 0, '');
              }
          }else{
              that.TimeArr = that.changeNowTimeArea // 恢复时间区域				
              if(that.DateNum == 0){ // 表示上一次就是 今天这个时间 数组需要重组的
                  let nowDateTimeNum = that.DateTimeNum + that.hour;
                  that.$emit('selectChange', nowDateTimeNum ,index , '');
                  // 让时间区域滚动到指定地点
                  that.scrollTop = 0;
                  that.scrollHeight(nowDateTimeNum);
              }else {
                  that.scrollTop = 0;
                  that.$emit('selectChange', that.DateTimeNum ,index , '');
                  // 让时间区域滚动到指定地点
                  that.scrollHeight(that.DateTimeNum);
              }
              
          }
			},
			// 滚动位置
			scrollHeight(num){
          let that = this
          if(num > 6) {
              this.$nextTick(function(){
                  that.scrollTop = 30*(num - 2);
              })
          }
			},
			// 点击时间段
			changeTimeNum (index){
          let that = this
          // this.DateTimeNum = index;
          // if(that.hour > index && that.DateNum == 0){ 
              // 做了隐藏 就不需要提示了
              // 判断如果当前选中的是当天 那么需要限制不让其选择小时间段的数据
          // 	that.$emit('errorChange', '当前时间段不允许选择');
          // }else {
              that.$emit('selectChange', index ,that.DateNum, '');
          // }
			},
			// 确定和 差都执行这个方法 只是一个有参数一个没有
			closePop(item){
          if(item == 'close'){
              // 关闭
              this.$emit("closePop");
          }else if(item == 'sub'){
              // 提交 数据
              this.$emit("selectChange",this.DateTimeNum,this.DateNum ,this.DateArr[this.DateNum]+' ' +this.TimeArr[this.DateTimeNum]);
          }
			},
			Loading(type){
          if(type == 'start'){
              uni.showLoading({
                  title: '加载中...',
                  mask: true
              });
          }else{
              uni.hideLoading();
          }
			}
  }
};
</script>

<style lang="scss">
	.TimeContent{
		padding: 0;
		margin: 0;
		display: flex;
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		max-width: 750rpx;
		background-color: transparent;
		font-weight: 400;
		z-index: 999;
		.item_pop{
			position: fixed;
			bottom: 0;
			padding: 20rpx;
			width: 100%;
			background-color: #fff;
			display: flex;
			height: 900rpx;
			flex-direction: column;
			justify-content: space-between;
			border-radius: 5rpx 5rpx 0 0;
			.label{
				text-align: center;
				width: 100%;
				font-size: 28rpx;
				padding: 25rpx 0;
				color: #000000;
				position: relative;
				border-bottom: 1rpx solid #ece8e8;
				.pos_tit{
					position: absolute;
					right: 40rpx;
					color: #8a8a8a;
					height: 44rpx;
					width: 44rpx;
					top: 20rpx;
				}
			}
		}
		.btn_sub{
			position: absolute;
			bottom: 0;
			height: 120rpx;
			margin: 0 auto;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			.btn{
				height: 80rpx;
				width: 70%;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 40rpx;
				background: linear-gradient(270deg, #F67636, #EF1F0A);
				font-size: 36rpx;
				color: white;
			}
		}
		.Date{
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			bottom: 120rpx;
			.left {
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 3;
				overflow-x: hidden;
				flex-wrap: wrap;
				height: 100%;
				height: 630rpx;
				background-color: #F9F9F7;
				.YearItem{
					display: flex;
					width: 100%;
					justify-content: center;
					align-items: center;
					letter-spacing: 5rpx;
					padding: 30rpx 0;
					flex-wrap: wrap;
					font-size: 28rpx;
					color: #676565;
				}
				.selectYear{
					background-color: #fff;
					border-left: 4rpx solid #EF1F0A;
					color: #000000;
					font-weight: 600;
				}
			}
			.right {
				flex: 4;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow-x: hidden;
				height: 680rpx;
				position: relative;
				flex-wrap: wrap;
				.right_scroll{
					height: 630rpx;
				}
				.TimeItem{
					display: flex;
					width: 100%;
					justify-content: center;
					align-items: center;
					letter-spacing: 5rpx;
					padding: 15rpx 0;
					flex-wrap: wrap;
					font-size: 28rpx;
					margin-bottom: 30rpx;
					border-radius: 10rpx;
					.btn{
						height: 38rpx;
						width: 38rpx;
						border-radius: 50%;
						background: #fff;
						position: absolute;
						right: 40rpx;
						border:1rpx solid #999999;
					}
					.active{
						color: white;
						border:1rpx solid #F67636;
						background: linear-gradient(270deg, #F67636, #EF1F0A);;
					}
				}
				.timeArea{
					border-radius: 10rpx;
					width: 90%;
					padding: 30rpx 0;
					border: 1rpx solid #8a8a8a;
					text-align: center;
				}
				.full{
					width: 100%;
				}
				.selectTime{
					color: #333333;
					border: 1rpx solid red;
				}
			}
		}
	}
	.textTime{
		width: 100%;
		text-indent: 1rem;
		font-size: 32rpx;
		color: #8a8a8a;
		padding: 35rpx 0;
		text-align: left;
		display: inline-block;
	}
	.hidden{
		display: none;
	}
</style>